<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312" />
		<title>无标题文档</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 arial;
			}
			#box {
				width: 100px;
				height: 100px;
				position: absolute;
				background: #06c;
				left: 0;
				filter: alpha(opacity=30);
				opacity: 0.3;
			}

		</style>
		<script>
			function getstyle(obj, name) {
				if (obj.currentStyle) {
					return obj.currentStyle[name];
				} else {
					return getComputedStyle(obj,false)[name];
				}
			}


			window.onload = function() {
				var box = document.getElementById("box");

				saction(box, "width", 200, 40, function() {
					console.log(1);
				});

				box.onmouseover = function() {
					saction(box, "width", 100, 40, function() {
						console.log(2);
					});
				}
			}
			function saction(obj, attr, target, t, fn) {
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					var cur = parseInt(getstyle(obj, attr));
					var speed = (target - cur) / 5;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if (cur == target) {
						clearInterval(obj.timer);
						if (fn) {
							fn();
						}
					} else {
						obj.style[attr] = cur + speed + "px";
					}
				}, t)
			}

			//-->
		</script>
	</head>

	<body>
		<div id="box"></div>
	</body>
</html>